<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1">
    <title>确认订单</title>
    <script src="<?php echo base_url('static/plugins/jquery-1.10.2.min.js')?>" type="text/javascript"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            padding-bottom: 0px;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-tap-highlight-color: transparent;

            -webkit-touch-callout:none;  /*系统默认菜单被禁用*/
            -webkit-user-select:none; /*webkit浏览器*/
            -khtml-user-select:none; /*早期浏览器*/
            -moz-user-select:none;/*火狐*/
            -ms-user-select:none; /*IE10*/
            user-select:none;
        }
        *:hover,*:active{
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-tap-highlight-color: transparent;
        }
        .item-info{margin-bottom:0.75em;}
        .item-info:last-child{margin:0;}
        input {
            -webkit-user-select:auto; /*webkit浏览器*/
        }
        body{
            background-color: #f5f5f5;
            font-szie:14px;
            line-height: 1;
            /*     		padding-bottom:0.5em; */
            width:99%;
            font-family: -apple-system-font, "Helvetica Neue", sans-serif;
            line-height: 1;
        }

        .weui-form-preview {
            position: relative;
            background-color: #FFFFFF;
        }

        .weui-form-preview__bd {
            padding: 10px 15px;
            font-size: .9em;
            text-align: right;
            color: #999999;
            line-height: 2;
        }

        .header{
            border-bottom: 1px solid rgba(230,230,230,.5);
            width:100%;
            position: relative;
            height:2.1rem;
        }
        .store-icon{
            width:1.2em;
            text-align:left;
            /*height:1.4em;*/
            position: absolute;
            /*top:-1px;*/
            left:0;
        }

        .store-icon img{
            width:100%;
            /*height:100%;*/
            vertical-align: middle;
        }
        .store-name{
            width:100%;
            text-align:left;
            line-height:2.1em;
            position: absolute;
            /*top:-0.3em;*/
            left:0.25rem;
            padding-left:1.3em;
            -moz-box-sizing: border-box;  /*Firefox3.5+*/
            -webkit-box-sizing: border-box; /*Safari3.2+*/
            -o-box-sizing: border-box; /*Opera9.6*/
            -ms-box-sizing: border-box; /*IE8*/
            box-sizing: border-box;
            padding-right:7.4em;
            padding-top:0;
            font-size:1.1em;
            color:rgb(51,51,51);
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }

        .action-btn{
            width:9em;
            text-align:right;
            height:1.3em;
            position: absolute;
            top:0;
            right:0;
            padding-top:0;
            padding-right:1em;
        }

        .form-select img{
            width:100%;
        }

        .item{
            width: 100%;
            position: relative;
            height: 6em;
            padding: 1rem 0 0.2rem 0;
            overflow: hidden;
            font-family: "PingFang";
        }
        .product-pic{
            width:5em;
            height:5em;
            position: absolute;
            top:1em;
            left:0;
            /*padding:1em 0;*/
        }

        .product-pic img{
            width:100%;
            height: 100%;
            border-radius:0.25rem;
        }

        .product-right{
            width:100%;
            height:7em;
            position: absolute;
            padding-left:5.2rem;
            -moz-box-sizing: border-box;  /*Firefox3.5+*/
            -webkit-box-sizing: border-box; /*Safari3.2+*/
            -o-box-sizing: border-box; /*Opera9.6*/
            -ms-box-sizing: border-box; /*IE8*/
            text-align:left;
            line-height:1.2em;
            color:rgb(153,153,153);
            font-size:0.5rem;
        }
        .fuhao{
            font-size: 0.6rem;
        }
        .product-right .name{
            width:100%;
            font-size:0.9rem;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            /*display: -webkit-box;*/
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            height: 2.1em;
            line-height: 1rem;
            font-family: "PingFang";
            color: rgb(51, 51, 51);
        }

        .product-right .price{
            width:100%;
            height:1em;
            /*bottom:-0.5em;*/
            position: absolute;
            -moz-box-sizing: border-box;  /*Firefox3.5+*/
            -webkit-box-sizing: border-box; /*Safari3.2+*/
            -o-box-sizing: border-box; /*Opera9.6*/
            -ms-box-sizing: border-box; /*IE8*/
            padding-right:5.5rem;
        }

        .product-right .attribute{
            margin: -0.5rem 0 0.5rem 0;
            font-size: 0.8rem;
            color: rgb(153,153,153);
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height:1rem;
        }

        .product-right .attribute .down{
            display:none;
        }

        .product-right .attribute.edit{
            position: relative;
            margin-top:3em;
            padding-right:8em;
            -moz-box-sizing: border-box;  /*Firefox3.5+*/
            -webkit-box-sizing: border-box; /*Safari3.2+*/
            -o-box-sizing: border-box; /*Opera9.6*/
            -ms-box-sizing: border-box; /*IE8*/
        }

        .product-right .attribute.edit .down{
            position: absolute;
            top:0;
            right:5.2em;
            display: block;
        }

        .product-right .attribute.edit .down img{
            width:1em;
        }

        .product-right .price .money{
            font-size:0.95rem;
            float:left;
            /* font-weight: 600; */
            float: left;
            color: rgb(193, 54, 56);
            font-weight: bold;
            font-family: "PingFang";
        }

        .product-right .price .Market-money{
            font-size:0.6rem;
            color:grey;
            text-decoration:line-through;
            float:left;
            margin-left:1em;
        }

        .product-right .price .Number{
            font-size:2em;
            color:grey;
            float:right;
        }
        .line{
            width:105%;
            position: relative;
            overflow: hidden;
        }
        .line div{
            border-bottom: 1px solid rgba(230,230,230,.5);
            /*margin:1em 0 0.2em 0;*/
            width:100%;
        }

        .line-row{
            width:100%;
            position: relative;
            overflow: hidden;
        }
        .line-row div{
            border-bottom: 1px solid rgba(230,230,230,.5);
            width:100%;
        }

        .item .delete-btn{
            position: absolute;
            height:8em;
            background-color:red;
            width:2em;
            top:0;right:0px;
            padding-left:0.5em;
            padding-right:0.5em;
            padding-top:3.2em;
            color:#FFFFFF;
        }
        .select-number{
            padding-right:4em;
            padding-top:1em;
        }
        .hide{display:none;}
        .m-1{
            width:25%;
            float:left;
        }

        .left{text-align:left;}
        .right{text-align:right;}
        .m-2{
            width:50%;
            float:left;
            text-align:center;
        }
        .m-1.subtract{
            margin-top:-0.2em;
        }
        .m-1 img{width:1em;}
        .select-number .number{
            padding-top:0em;
        }

        .bottom{
            height:3em;
            background-color: #FFFFFF;
            border-top: 1px solid #ddd;
            position:fixed;
            bottom:0;
            width:100%;
        }

        .width-keep{
            -moz-box-sizing: border-box;  /*Firefox3.5+*/
            -webkit-box-sizing: border-box; /*Safari3.2+*/
            -o-box-sizing: border-box; /*Opera9.6*/
            -ms-box-sizing: border-box; /*IE8*/
        }

        .order-sum{
            padding-bottom: 0;padding-top:0;
        }
        .row{
            width:100%;clear:both;padding-top:0.5em;padding-bottom:0.5em;float:left;
        }
        /*         .type_name{width:4rem} */
        ._number{
            margin-right: 1rem;
        }
        .md-4{width:40%;float:left;color:#333;}
        .md-6{width:60%;float:left;position:relative;}
        input{height:1em;width:100%;display:block;border:0;outline:none;padding-top:0.5em;padding-bottom:0.5em;font-size:.9rem;}

        .right-arrow{position:absolute;right:0;top:0.1em;}
        .right-arrow img{height:0.8em;}
        .freight{padding-right:0;}
        .line-row{border-bottom:1px solid rgba(230,230,230,.5);}
        .bonus,.coupon{color: red}

    </style>
</head>
<body>
<div class="container" id="container">
    <div class="page js_show home">
        <div class="page preview js_show" id="content">
            <!-- 循环 -->
            <div class="weui-form-preview" style="display:none">
                <div class="weui-form-preview__bd">
                    <div class="header">
                        <div class="store-icon"><img src="<?php echo base_url('static/appui/imgs/store-icon.png');?>"/></div>
                        <div class="store-name">
                            <!-- 商户名称 -->
                        </div>
                        <div class="action-btn width-keep">

                            到店消费

                            <div class="right-arrow"><img src="<?php echo base_url('static/appui/imgs/right.png'); ?>"/></div>
                        </div>
                    </div>
                    <!-- 商品循环 -->
                    <div class="item">
                        <div class="product-pic">
                            <!-- 商品图标 -->
                            <img src="">
                        </div>
                        <div class="product-right">
                            <div class="name">
                                <!-- 商品名称 -->
                            </div>
                            <div class="attribute guige">
                                规格：<!-- 规格 -->
                            </div>
                            <div class="attribute tags">
                                属性：<!-- 属性 -->
                            </div>
                            <div class="price">
                                <span class="money"><b>￥<!-- 价格 --></b></span>

                                <span class="Market-money">￥<!-- 市场价 --></span>
                                <span class="Number">x<!-- 购买数量 --></span>
                            </div>
                        </div>
                    </div>
                    <div class="line width-keep"><div></div></div>
                    <!--  -->
                </div>
            </div>

            <div class="weui-form-preview" style="display:none">
                <div class="weui-form-preview__bd order-sum">
                    <div class="row">
                        <div class="md-4 left">
                            配送费
                        </div>
                        <div class="md-6 right width-keep freight">
                            ￥ <!-- 配送费 -->
                        </div>
                    </div>
                    <div class="line-row width-keep"><div></div></div>
                    <div class="row">
                        <div class="md-4 left">
                            红包
                        </div>
                        <div class="md-6 right width-keep right-Arrow">
                            <div class="right-arrow"><img src="<?php echo base_url('static/appui/imgs/right.png'); ?>"/></div>
                        </div>
                    </div>
                    <div class="line-row width-keep"><div></div></div>
                    <div class="row">
                        <div class="md-4 left">
                            代金券
                        </div>
                        <div class="md-6 right width-keep">
                            <div class="right-arrow"><img src="<?php echo base_url('static/appui/imgs/right.png'); ?>"/></div>
                        </div>
                    </div>
                    <div class="line-row width-keep"><div></div></div>
                    <div class="row left">
                        <input class="liuyan" placeholder="选填：给商家留言"/>
                    </div>
                    <div style="clear: both;"></div>
                </div>
            </div>

            <!--  -->
        </div>
    </div>
</div>

<!--
 	<div class="form-select" style="padding-top:0.7em;padding-left:15px;width:5em;">
       <img src="<?php echo base_url('static/appui/imgs/select.png');?>" style="width:1.3em;">
       <div style="display: inline-block;margin-left:0.2em;padding-top:0.4em;vertical-align: top;font-size:0.9em;">全选</div>
    </div>
     -->
<!--
    <div style="position:absolute;top:0;padding-left:7em;width:100%;height:100%;" class="width-keep">
    	<div style="float:left;width:60%;padding-top:1.3em;text-align:right;padding-right:1em;font-size:0.9em;" class="width-keep">合计：<span style="color: #b94a48;">￥<?php echo $total;?></span></div>
    	<div style="float:left;height:100%;background-color: red;color: #FFFFFF;width:40%;text-align:center;font-size:1em;padding-top:1.1em;">去结算</div>
    </div>
     -->

<script type="text/javascript">

    var changeObj = null;
	var sendOut = '<?php echo $send_our_immediately;?>';
    //通信对象
    if( ! jsCxsm){
        var jsCxsm = {
            //预览订单
            //type 1 消费类型 2 红包  3 代金券 4备注
            showType:function(type,merchantId,remark){
                showType(type,merchantId,remark)
            },
        }
        document.title = 'jsCxsm对象不存在，则说明你是ios';
    }else{
        document.title = 'jsCxsm对象存在，则说明你是android';
    }


    $(function(){

        $('input').focus(function(){
            $('.bottom').addClass('hide');
        });

        $('input').blur(function(){
            $('.bottom').removeClass('hide');
        });

        var order = eval('(<?php echo json_encode($order);?>)')
        console.log('订单参数:')
        console.log(order)

        var	html ='<div>'
        html += '<div class="weui-form-preview">'
        html += '<div class="weui-form-preview__bd">'
        html += '		<div class="header">'
        html += '			<div class="store-icon"><img src="<?php echo base_url('static/appui/imgs/store-icon.png');?>"/></div>'
        html += '			<div class="store-name">'
        html += '				<!-- 商户名称 -->'
        html += '			</div>'
        //html += '			<div class="action-btn width-keep _type1">'
        //html += '				<span class="type_name">请选择消费模式</span>'
        //html += '				<div class="right-arrow"><img src="<?php echo base_url('static/appui/imgs/right.png'); ?>"/></div>'
        //html += '			</div>'
        html += '		</div>'
        html += '<!-- 商品循环 -->'
        html += '<div id="item">'
        html += '</div>'
        html += '<!--  -->'
        html += '</div>'
        html += '</div>'
        html += ''
        html += '</div>'
        ohtml = $(html);


        var	item = '<div>'
        item += '<div class="item">'
        item += '	<div class="product-pic">'
        item += '		<!-- 商品图标 -->'
        item += '		<img src="" class="icon">'
        item += '	</div>'
        item += '	<div class="product-right">'
        item += '		<div class="name">'
        item += '			<!-- 商品名称 -->'
        item += '		</div>'
        item += '		<div class="attribute guige">'
        item += '			规格：<!-- 规格 -->'
        item += '		</div>'
        item += '		<div class="attribute tags">'
        item += '			属性：<!-- 属性 -->'
        item += '		</div>'
        item += '		<div class="price">'
        item += '			<span class="money"><span class="fuhao">¥</span><b class="b_money"><!-- 价格 --></b></span>'
        item += '				<span class="Market-money">￥<!-- 市场价 --></span>'
        item += '					<span class="Number">x<!-- 购买数量 --></span>'
        item += '		</div>'
        item += '	</div>'
        item += '</div>'
        item += ' <div class="line width-keep"></div>'
        item += '</div>'
        oitem = $(item);

        var info ='<div>'
        info +='<div class="weui-form-preview">'
        info +='<div class="weui-form-preview__bd order-sum">'

        info +=' <div class="row _type6 _timeBox">'
        info +='<div class="md-4 left _times">'
        info +='送达时间'
        info +='</div>'
        info +='<div class="md-6 right width-keep">'
        info += '<span class="type_name _number _timeName">立即送出(预计:'+sendOut+')</span>'
        info +='	<div class="right-arrow"><img src="<?php echo base_url('static/appui/imgs/right.png'); ?>"/></div>'
        info +='</div>'
        info +='</div>'

        info +='<div class="row _freight">'
        info +='<div class="md-4 left">'
        info +='	配送费	'
        info +='</div>'
        info +='<div class="md-6 right width-keep _type7">'
//        info +='	￥ <!-- 配送费 -->'
        info += '<span class="type_name _number freight">￥</span>'
        info +='<div class="right-arrow"><img src="<?php echo base_url('static/appui/imgs/right.png'); ?>"/></div>'
        info +='</div>'
        info +='<div class="line-row width-keep"></div>'
        info +='</div>'

        info +='<div class="row">'
        info +='<div class="md-4 left">'
        info +='	打包费	'
        info +='</div>'
        info +='<div class="md-6 right width-keep lunch_box_fee">'
        info +='	<!-- 活动 -->'
        info +='</div>'
        info +='</div>'


        info +='<div class="row">'
        info +='<div class="md-4 left">'
        info +='	活动	'
        info +='</div>'
        info +='<div class="md-6 right width-keep full_cut">'
        info +='	<!-- 活动 -->'
        info +='</div>'
        info +='</div>'

        info +='<div class="line-row width-keep"></div>'

        info +='<div class="row _type2">'
        info +='<div class="md-4 left">'
        info +='红包'
        info +='</div>'
        info +='<div class="md-6 right width-keep right-Arrow">'
        info += '<span class="type_name _number bonus"></span>'
        info +='	<div class="right-arrow"><img src="<?php echo base_url('static/appui/imgs/right.png'); ?>"/></div>'
        info +='</div>'
        info +='</div>'

        info +=' <div class="line-row width-keep"></div>'

        info +=' <div class="row">'
        info +='<div class="md-4 left">'
        info +='首单减免'
        info +='</div>'
        info +='<div class="md-6 right width-keep">'
        info += '<span class="first_order_reduce _number"></span>'
        info +='	<div class="right-arrow"></div>'
        info +='</div>'
        info +='</div>'

        info +=' <div class="line-row width-keep"></div>'

        info +=' <div class="row _type3">'
        info +='<div class="md-4 left">'
        info +='代金券'
        info +='</div>'
        info +='<div class="md-6 right width-keep">'
        info += '<span class="type_name _number coupon"></span>'
        info +='	<div class="right-arrow"><img src="<?php echo base_url('static/appui/imgs/right.png'); ?>"/></div>'
        info +='</div>'
        info +='</div>'

        info +=' <div class="row _type5">'
        info +='<div class="md-4 left">'
        info +='如遇缺货'
        info +='</div>'
        info +='<div class="md-6 right width-keep">'
        info += '<span class="type_name _number"></span>'
        info +='	<div class="right-arrow"><img src="<?php echo base_url('static/appui/imgs/right.png'); ?>"/></div>'
        info +='</div>'
        info +='</div>'

        info +='<div class="line-row width-keep"></div>'
        info +=' <div class="row left">'
        info +='<input placeholder="选填：给商家留言" name="_type4"/>'
        info +='</div>'
        info +='<div class="line-row width-keep">'
//     		info +='<div style="clear: both;"></div>'
        info +='</div>'
        info +=''
        info +='<div/>'
        oinfo = $(info);


        for(n in order){

            ohtml.find('.store-name').text(order[n].name)
            ohtml.find('#item').addClass('item'+n)
            ohtml.find('.weui-form-preview').attr('data-id',n);//设置商家id

            $("#content").append(ohtml.html());
            //商品列表
            var item = order[n].list;
            for(var i=0;i<item.length;i++){
                oitem.find('.name').text(item[i].name.substring(0,20))
                oitem.find('.icon').attr('src',item[i].icon)
                oitem.find('.guige').text(item[i].property)
                oitem.find('.tags').text(item[i].tags)
                oitem.find('.b_money').text(item[i].price)
		oitem.find('.Market-money').addClass('hide');
                if(item[i].market_price > 0){
                    oitem.find('.Market-money').addClass('show').removeClass('hide');
                }
                oitem.find('.Market-money').text('¥'+item[i].market_price)
                oitem.find('.Number').text('x'+item[i].b_quantity)
                $(".item"+n).append(oitem.html());
            }

            //不支持红包
            if(order[n].is_bonus == 1){
                oinfo.find('._type2').hide()
                oinfo.find('._type2').next('.line-row').hide()
            }

            //不支持代金劵
            if(order[n].is_coupon == 1){
                oinfo.find('._type3').hide()
                oinfo.find('._type3').next('.line-row').hide()
            }

            oinfo.find('.weui-form-preview').attr('data-id',n).addClass("item-info");//设置商家id
            oinfo.find('.freight').text('¥'+order[n].shipping_fee).parents('.row') //默认 到店消费 隐藏配送费
            oinfo.find('.full_cut').text(order[n].full_cut_str)
            oinfo.find('.bonus').text(order[n].bonus)
            oinfo.find('.coupon').text(order[n].coupon)
            oinfo.find('.lunch_box_fee').text(order[n].lunch_box_fee)
            oinfo.find('.first_order_reduce').text(order[n].first_order_reduce)

            $("#content").append(oinfo.html());
        }


        //更换类型
        $("._type1").on('click',function(){
            changeObj = $(this)
            var item = $(this).parents('.weui-form-preview')
            var merchantId = item.attr('data-id')
            //setType('{"text":"送货上门","type":"2"}')
            jsCxsm.showType(1,merchantId,'')
        })

        //更换红包
        $("._type2").on('click',function(){
            changeObj = $(this)
            var item = $(this).parents('.weui-form-preview')
            var merchantId = item.attr('data-id')
            jsCxsm.showType(2,merchantId,'')
        })

        //更换代金劵
        $("._type3").on('click',function(){
            changeObj = $(this)
            var item = $(this).parents('.weui-form-preview')
            var merchantId = item.attr('data-id')
            jsCxsm.showType(3,merchantId,'')
        })

        //提交备注
//		$('[name="_type4"]').change(function(){
//			changeObj = $(this)
//			var item = $(this).parents('.weui-form-preview')
//			var merchantId = item.attr('data-id')
//			var text = $(this).val()
//            console.log(text)
//			jsCxsm.showType(4,merchantId,text)
//		})
        $('[name="_type4"]').bind('input propertychange', function() {
            changeObj = $(this)
            var item = $(this).parents('.weui-form-preview')
            var merchantId = item.attr('data-id')
            var text = $(this).val()
            console.log(text)
            jsCxsm.showType(4,merchantId,text)
        });
//        $('[name="_type4"]').on('change',function () {
//            changeObj = $(this)
//            var item = $(this).parents('.weui-form-preview')
//            var merchantId = item.attr('data-id')
//            var text = $(this).val()
//            console.log(text)
//            jsCxsm.showType(4,merchantId,text)
//        })

        //更换如遇缺货
        $("._type5").on('click',function(){
            changeObj = $(this)
            var item = $(this).parents('.weui-form-preview')
            var merchantId = item.attr('data-id')
            jsCxsm.showType(5,merchantId,'')
        })

        //更换如遇缺货
        $("._type6").on('click',function(){
            changeObj = $(this)
            var item = $(this).parents('.weui-form-preview')
            var merchantId = item.attr('data-id')
            jsCxsm.showType(6,merchantId,'')
        })

        //查看配送费详情
        $("._type7").on('click',function(){
            changeObj = $(this)
            var item = $(this).parents('.weui-form-preview')
            var merchantId = item.attr('data-id')
            jsCxsm.showType(7,merchantId,'')
        })
    });


    function setValue(data){
        //$('.weui-form-preview').before('您的参数:'+data);
        //'{"text":"送货上门"}','{"text":"-20"}'
        var data = JSON.parse(data)
        changeObj.find('.type_name').text(data.text)
    }

    function setType(data){
        //$('.weui-form-preview').before('您的参数:'+data);
        var data = JSON.parse(data)
//		changeObj.find('.type_name').text(data.text)
        var vl = $('._timeName').text();
        if (data.type == 1) {
            //送货上门
//            $('.weui-form-preview').before('您的参数:'+data)
            //changeObj.parents(".preview").find('.freight').parents('.row').show() //跟换类型后显示配送费
            $('._times').text('送达时间');
            if (vl == '立即送出' || vl == '立即提取'){
                $('._timeName').text('立即送出')
            }
            $('._freight').show();
        }else if(data.type == 2){
            //到店自提
            //changeObj.parents(".preview").find('.freight').parents('.row').hide() //跟换类型后显示配送费
            $('._times').text('自提时间');
            if (vl == '立即送出' || vl == '立即提取'){
                $('._timeName').text('立即提取')
            }
            $('._freight').hide();
        }
    }

    function setShippingFee(data){
        var data = JSON.parse(data).data
// 		var data = JSON.parse('{"status":1,"message":"","data":[{"merchant_id":"3","shipping_fee":"20"}]}').data
        var Div = $('.item-info');

        for (var n = 0; n < Div.length; n++){
            for (var i = 0; i < data.length; i++) {
                if (data[i].merchant_id == $(Div[n]).attr('data-id')) {
                    $(Div[n]).find(".freight").text('¥'+data[i].shipping_fee);
                }
            }
        }
    }

    var param = {"3":{"bonus":"1","coupon":"2","type":"1"}}
    console.log(param)

</script>
<script>
    $(".liuyan").on('focus',function(){
        let _this = this;
        setTimeout(function(){
            _this.scrollIntoViewIfNeeded();
        },200)
    })
</script>
</body>
</html>
